<template>
  <div class="app-container">
    <van-nav-bar title="省公司动态" left-arrow @click-left="$router.push('/home')" />
    <div class="content-box">
      <div class="filter-box">
        <el-input v-model="form.title" placeholder="请输入标题进行搜索" @input="filterList" />
        <el-date-picker v-model="form.date" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd" readonly clearable @focus="showDatePicker = true" />
        <van-calendar v-model="showDatePicker" type="range" :show-confirm="false"
          :min-date="dayjs().subtract(1, 'year').toDate()" @confirm="filterList" />
      </div>
      <div class="info-box">
        <div class="info-item" v-for="item in infoItemList" :key="item.label" @click="toDetail(item)">
          <div class="title">{{ item.title }}</div>
          <div class="tip">{{ item.tip }}</div>
          <div class="time">{{ dayjs(item.time).format('MM月DD日 HH:mm') }}</div>
          <div class='ribbon' :class="item.isRead && 'is-read'">
            <span>{{ item.isRead ? '已读' : '未读' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import isBetween from 'dayjs/plugin/isBetween';
dayjs.extend(isBetween);

export default {
  name: 'CompanyNews',
  data() {
    return {
      form: { title: '', date: [] },
      showDatePicker: false,
      defaultList: [
        {
          time: '2025-6-27 10:47',
          title: '全国劳动模范风采（十三）丨大山通信“摆渡人”：一根扁担、17万公里、25年坚守',
          tip: '全国劳动模范风采（十三）丨大山通信“摆渡人”：一根扁担、17万公里、25年坚守',
          path: 'https://mp.weixin.qq.com/s/WlryMse1gqtT2wRJ0GfeiA?color_scheme=light',
          isRead: false,
        },
        {
          time: '2025-6-26 16:15',
          title: '终端翼家情——探索实打实、心贴心员工关爱方案',
          tip: '终端翼家情——探索实打实、心贴心员工关爱方案',
          path: 'https://mp.weixin.qq.com/s/I1b-sD7oGI2fRaAfoFbA-A?color_scheme=light',
          isRead: false,
        },
        {
          time: '2025-6-25 17:12',
          title: '全国劳动模范风采（十二）丨不停学、带头干！他为城市装上“智慧脑”',
          tip: '全国劳动模范风采（十二）丨不停学、带头干！他为城市装上“智慧脑”',
          path: 'https://mp.weixin.qq.com/s/VADedbgrX3_JP-q9E2sGoQ?color_scheme=light',
          isRead: false,
        },
      ],
      infoItemList: [],
    };
  },
  created() {
    this.infoItemList = this.defaultList;
  },
  methods: {
    dayjs: dayjs,
    filterList(value) {
      if (!value) return (this.infoItemList = this.defaultList);
      if (typeof value == 'string') this.infoItemList = this.defaultList.filter((item) => item.title.includes(value));
      if (Array.isArray(value)) {
        this.showDatePicker = false;
        this.form.date = value;
        this.infoItemList = this.defaultList.filter((item) => {
          return dayjs(item.time).isBetween(value[0], value[1], 'day', '[]');
        });
      }
    },
    toDetail(item) {
      window.open(item.path, '_blank');
      item.isRead = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 90px);
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  // overflow: auto;

  & > div {
    margin-top: 15px;

    &:first-child {
      margin-top: 0px;
    }
  }
}

::v-deep .filter-box {
  & > * {
    margin-bottom: 10px;
  }
  .el-input__inner {
    border-radius: 10px;
  }
  .el-date-editor--daterange {
    width: 100%;
  }
}

.info-box {
  width: 100%;
  height: calc(100% - 100px);
  overflow: auto;

  .info-item {
    width: calc(100% - 24px);
    border-radius: 5px;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 12px;
    position: relative;
    overflow: hidden;

    &,
    & > div {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0px;
      }
    }

    .title {
      font-weight: bold;
      padding-right: 50px;
    }

    .tip {
      color: #6e7277;
      font-size: 14px;
    }

    .time {
      font-size: 14px;
      color: #a8aaad;
    }

    // 右上角飘带
    .ribbon {
      background-color: #e28f08;
      overflow: hidden;
      white-space: nowrap;
      position: absolute;
      right: -40px;
      top: 10px;
      transform: rotate(45deg);

      &.is-read {
        background-color: #427aff;
      }

      span {
        border: 1px solid #54cbff;
        color: #fff;
        display: block;
        padding: 5px 50px;
        text-align: center;
        font-size: 18px;
      }
    }
  }
}
</style>